<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    v-slot 语法
        1. v-slot:插槽的名字="作用域插槽的数据"
        2. v-slot:插槽的名字
        3. #插槽的名字
        4. #插槽的名字="作用域插槽的数据"
        5. #插槽的名字="{ 数据1, 数据2 }"

    v-slot 使用限制：
        1. Vue3 中直接使用
        2. Vue2 中需要在 2.6 版本开始才能用

    2.6版本之前如何玩 具名插槽与作用域插槽
        1. 具名插槽     slot="插槽的名字"
        2. 作用域插槽    slot-scope="作用域插槽的数据"
   -->

    <div id="app"></div>

    <script src="../lib/vue-2.js"></script>
    <script>
      Vue.component("hello", {
        data() {
          return {
            msg: "里斯",
          };
        },
        template: `
          <div>
            <p>欢迎，xxx</p>  
            <slot a="aa" b="bb" :c="msg" />
            <hr />
            <slot name="footer" a="1" b="2" />
          </div>
        `,
      });

      new Vue({
        el: "#app",

        data() {
          return {
            msg: "张三",
          };
        },
        template: `
          <div>
            <hello>
              <template slot-scope="obj">
                <button>点我, {{ obj }}</button>  
              </template>  

              <template slot="footer" slot-scope="{a, b}">
                <button>点我2, {{ a }} - {{ b }}</button>  
              </template>  
            </hello>  
          </div>
        `,
      });
    </script>
  </body>
</html>
